<!DOCTYPE html>
<!-- v-model 指令在表单控件元素上创建双向数据绑定。 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="utils/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- v-model 会根据控件类型自动选取正确的方法来更新元素 -->
			___________input and textarea___________________
			<p>input element:</p>
			<input v-model="message" placeholder="please input..." />
			<p>message is: {{message}}</p>
			<!--  -->
			<p>textarea element </p>
			<textarea v-model="message2" placeholder="multiply column input..."></textarea>
			<p>message2 is: {{message2}}</p>
			____________checkbox__________________
			<p>单个复选框</p>
			<input type="checkbox" id="checkbox" v-model="checked" />
			<label for="checkbox">{{checked}}</label>
			<p>多个复选框</p>
			<input type="checkbox" value="双双" v-model="checkedNames" />
			<label for="双双">双双</label>
			<input type="checkbox" value="jingyuan" v-model="checkedNames" />
			<label>jingyuan</label>
			<!-- 把value和checkedNames进行双向数据绑定，写入数组 -->
			<input type="checkbox" value="shuangshuang" v-model="checkedNames" />
			<label>shuangshuang</label>
			<br>
			<span>select ele is : {{checkedNames}}</span>
			____________radio__________________
			<p>单选按钮</p>
			<input type="radio" value="shuangshuang" v-model="radioData" />
			<label>shuangshuang</label>
			<br>
			<input type="radio" value="xiaoyuanyuan" v-model="radioData" />
			<label>xiaoyuanyuan</label>
			<br>
			<input type="radio" value="小可爱" v-model="radioData" />
			<label>小可爱</label>
			<br>
			<p>select radio is : {{radioData}}</p>
			____________下拉列表的双向数据绑定___________
			<select v-model="selectedList">
				 <option value="">选择一个网站</option>
				<option value="baidu.com">baidu</option>
				<option value="bing.com">bing</option>
				<option value="weibo.com">weibo</option>
			</select>
			<p>selected website is :{{selectedList}}</p>
			____________修饰符___________
			<!-- .trim 自动过滤用户输入的首尾空格 -->
			<input v-model.trim="msg" />
			<span style="background: #008000;">{{msg}}</span>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					checked: false,
					checkedNames: [],
					radioData: [],
					selectedList:'',
					message: 'Runoob',
					message2: '菜鸟教程\r\nhttp://www.runoob.com',
					msg:"  1234 5678  "
				},
				methods: {

				},
				filters: {

				},
				computed: {

				},
				watch: {

				}
			});
			// vm.$watch('',arg1,arg2){
			// };
		</script>
	</body>
</html>
